<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
    <script src="https://unpkg.com/vue@next"></script>
    <!-- 防抖 -->
    <script src="https://unpkg.com/lodash@4.17.20/lodash.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>

    <script src="https://unpkg.com/vue@3"></script>
    <script src="https://unpkg.com/vue-router@4"></script>
</head>
<body>

    <div id="counter">
        Counter: {{ count }}
        <br/>

        <div id="str">
            <p> {{ message }} </p>
            <input v-model="message">
        </div>

        <div id="event-handling">
            <p>{{ message }}</p>
            <button v-on:click="reverseMessage">反转 Message</button>
        </div>

        <div id="conditional-rendering">
            <span v-if="seen">现在你看到我了</span>
            <button v-on:click="turnOffqwe">{{ openSwitch }}</button>
        </div>

        <div id="bind-attr">
            <span v-bind:title="message">
                鼠标悬停几秒钟查看此处动态绑定的提示信息！
            </span>
        </div>

        <div id="forEach">
            <li>
                <option v-for="(label, index) in labelList">
                    {{ index }} - {{ label.text }}
                </option>
            </li>
        </div>

        <div id="computeMethod">
            <p> {{ conputeMessage }}</p>
        </div>

        <div id="watchDiv">
            <p>
                Ask a yes/no question:
                <input v-model="question" />
            </p>
            <p>{{ answer }}</p>
        </div>

        <div id="push">
            <span v-if="seen">Push Message:</span>
            <input v-model="pushMessage">
        </div>
    </div>
</body>

<script>
    const Counter = {
        data(){
            return{
                count: 0,
                message: "hello vue.js",
                seen: true,
                num: 0,
                openSwitch: "关闭",
                labelList:[
                    {
                        "text":1
                    },
                    {
                        "text":2
                    }
                ],
                answer: "This is the answer ....",
                question: '',
                pushMessage:''
            }
        },
        mounted(){
            setInterval(() => {
                this.count ++
            }, 1000)
        },
        methods:{
            reverseMessage: _.debounce(function() {
                console.log("click reverseMessage .." + new Date().toLocaleString())
                this.message = this.message
                    .split('')
                    .reverse()
                    .join('')
            }, 500),
            turnOffqwe(){
                this.num++
                if (this.num % 2 === 1){
                    this.openSwitch = "开启"
                    this.seen = false
                }else {
                    this.openSwitch = "关闭"
                    this.seen = true
                }
            },
            getAnswer(){
                axios
                .get('https://yesno.wtf/api')
                .then(response => {
                    console.log(response)
                    this.answer = response.data.answer
                })
                .catch(error => {
                    console.log("Request Error "  + error)
                })
            }
        },
        computed:{
            conputeMessage(){
                return this.message.length > 5 ? "长度大于5" : "长度小于5"
            }
        },
        watch: {
            question(newValue, oldValue) {
                console.log("question has changed... old:" + oldValue + " new: " + newValue)
                this.answer = newValue
                this.getAnswer()
            },
            pushMessage(val1, old) {
                this.labelList.push({"text": val1})
            }
        },
        components:{

        }
    }

    const AttributeBinding = {
        data() {
            return {
                message: 'You loaded this page on ' + new Date().toLocaleString()
            }
        }
    }
    Vue.createApp(Counter).mount('#counter')
</script>
</html>